<template>
  <div class="app-container">
    <!-- 1. header 固定头部 -->
    <mt-header fixed title="黑马程序员-Vue项目">
      <!-- 返回按钮 -->
      <span slot="left">
        <mt-button icon="back" @click="goBack" v-show="flag">返回</mt-button>
      </span>
    </mt-header>

    <!-- 2. 中间内容板块, 路由占坑, 添加切换动画效果 -->
    <transition>
      <router-view></router-view>
    </transition>

    <!-- 3. tabBar 固定底部 设置路由链接 -->
    <nav class="mui-bar mui-bar-tab">
      <router-link class="mui-tab-item-change" to="/home">
        <span class="mui-icon mui-icon-home"></span>
        <span class="mui-tab-label">首页</span>
      </router-link>
      <router-link class="mui-tab-item-change" to="/member">
        <span class="mui-icon mui-icon-contact"></span>
        <span class="mui-tab-label">会员</span>
      </router-link>
      <router-link class="mui-tab-item-change" to="/shopCar">
        <span class="mui-icon mui-icon-extra mui-icon-extra-cart">
          <span class="mui-badge" id="cartBall">{{ getCartCount }}</span>
        </span>
        <span class="mui-tab-label">购物车</span>
      </router-link>
      <router-link class="mui-tab-item-change" to="/search">
        <span class="mui-icon mui-icon-search"></span>
        <span class="mui-tab-label">搜索</span>
      </router-link>
    </nav>
  </div>
</template>

<script>
/** 使用vuex获取购物车中的数据 **/
import { mapGetters } from 'vuex'

/** 向外暴露Vue根组件 **/
export default {
  data(){
    return{
      flag: false // 设置标记, 默认是首页, 不显示返回按钮
    }
  },
  methods: {
    /** 点击但会按钮进行页面的回退, 通过$router原型中的go函数进行跳转 **/
    goBack(){
      this.$router.go(-1);
    }
  },
  created() {
    /** 在页面刷新的时候路由监听不到地址栏的变化, 所以需要使用生命周期函数来协助监听 **/
    if( this.$route.path === '/home' ){
      this.flag = false;
    }else{
      this.flag = true;
    }
  },
  /** 监听地址栏的变化, 使得当页面是首页的时候, 不显示返回按钮 **/
  watch: {
    '$route.path': function(newVal, oldVal){
      if( newVal === '/home' ){
        this.flag = false;
      }else{
        this.flag = true;
      }
    }
  },
  computed: {
    ...mapGetters(
        ['getCartCount']
    )
  }
}
</script>

/** 这里使用的样式, 要符合scss语法 ,并且样式是当前组件私有的, 不会成为全局样式, 也不会应用给子组件 **/
<style lang="scss" scoped>
  /** 1. 容器的样式 **/
  .app-container{
    padding-top: 40px;
    padding-bottom: 50px;
    /* 当组件进行切换时, 在那一瞬间页面大小会变成原来的两倍,
      需要隐藏多出来的部分, 使得页面其他组件不受影响 */
    overflow: hidden; /*虽然不知道为什么可以做到不写也没事, 但是为了兼容*/

  }

  /** 2. 路由的切换动画效果 **/
  .v-enter{ /* 进入时 */
    option: 0;
    transform: translateX(100%);
  }
  .v-leave-to{ /* 离开后 */
    option: 0;
    transform: translateX(-100%);
    position: absolute;
  }
  .v-enter-active, /* 中间状态 */
  .v-leave-to-active{
    transition: all 0.4s ease;
  }

  /** 3. 将mui-tab-item-change样式名改为自定义, 此类样式和JS行为发生冲突所致 **/
  .mui-tab-item-change{
    display: table-cell;
    overflow: hidden;
    width: 1%;
    height: 50px;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #929292;
  }
  .mui-tab-item-change.mui-active {
    color: #007aff;
  }

  /** 4. 修改头部的层级, 提高组件之间的视觉体验, 防止头部被覆盖 **/
  .mint-header{
    z-index: 99;
  }

</style>